<template>
  <div>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img :src="'http://liufusong.top:8080' + item.imgSrc" />
      </van-swipe-item>
    </van-swipe>
    <van-search
      v-model="value"
      placeholder="请输入小区或地址"
      class="search-box"
      show-action
    >
      <template #label
        >{{ city.label
        }}<span class="xsjx" @click="$router.push('/city')">▼</span
        >&nbsp;|&nbsp;</template
      >
      <template #action
        ><van-icon name="location-o" class="ditu" color="#fff" size="23" @click="$router.push('/map')"
      /></template>
    </van-search>
    <div class="home-title">
      <div class="title">
        <div class="ztbox"><van-icon name="shop-o" class="tubiao" round /></div>
        <h2 class="zi">整租</h2>
      </div>
      <div class="title">
        <div class="ztbox">
          <van-icon name="friends-o" class="tubiao" round />
        </div>
        <h2 class="zi">合租</h2>
      </div>
      <div class="title">
        <div class="ztbox">
          <van-icon name="photo-o" class="tubiao" round />
        </div>
        <h2 class="zi">地图找房</h2>
      </div>
      <div class="title">
        <div class="ztbox">
          <van-icon name="gold-coin-o" class="tubiao" round />
        </div>
        <h2 class="zi">去出租</h2>
      </div>
    </div>
    <div class="home-box">
      <div class="shang">
        <div class="zfxz">租房小组</div>
        <div class="more">更多</div>
      </div>
      <div class="xia">
        <div class="zuo" v-for="(item, index) in images1" :key="index">
          <img :src="'http://liufusong.top:8080' + item.imgSrc" alt="" />
          <div class="ziti">{{ item.title + item.desc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSwiper, getGroups } from '@/api/home'

export default {
  name: 'home-page',
  data() {
    return {
      images: [],
      images1: [],
      value: '',
      active: 0,
      city: JSON.parse(window.localStorage.getItem('city')) || {
        label: '上海',
        value: 'AREA|dbf46d32-7e76-1196',
        pinyin: 'shanghai',
        short: 'sh'
      }
    }
  },
  methods: {},
  async created() {
    console.log(this.city)
    const res = await getSwiper()
    const res1 = await getGroups(this.city.value)
    // console.log(res1)
    this.images1.push(...res1.body)
    // console.log(res)
    this.images.push(...res.body)
    // console.log(this.images)
  }
}
</script>

<style scoped lang="less">
.van-swipe {
  width: 375px;
  height: 212px;
  z-index: 1;
  position: relative;
}
img {
  height: 100%;
  width: 100%;
}

.search-box {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 5px;
  height: 34px;
  width: 365px;
  background-color: rgba(0, 0, 0, 0);
  font-size: 14px;
  line-height: 34px;
  .xsjx {
    color: #7f7f80;
    font-size: 10px;
  }
  .ditu {
    padding-top: 10px;
    font-size: 23px;
  }
}
.home-title {
  height: 123px;
  background-color: #fff;
  .title {
    width: 25%;
    float: left;
    text-align: center;
    h2 {
      font-weight: 400;
      font-size: 14px;
      color: #333;
      padding-top: 15px;
    }
    .tubiao {
      font-size: 45px;
      color: #21b97a;
      margin-top: 15px;
      background-color: rgba(75, 202, 75, 0.1);
      border-radius: 50%;
    }
  }
}

.home-box {
  width: 375px;
  height: 188px;
  background-color: #f6f5f6;
  .shang {
    display: flex;
    .zfxz {
      float: left;
      padding: 8px 10px;
      font-size: 15px;
      color: #333;
      font-weight: 700;
    }
    .more {
      float: right;
      padding: 8px 0px 10px 255px;
      font-size: 14px;
      font-weight: 400;
    }
  }
  .xia {
    float: left;
    .zuo {
      display: flex;
      margin-left: 12px;
      float: left;
      width: 165px;
      height: 70px;
      font-size: 14px;
      background-color: #fff;
      margin-bottom: 5px;
      margin-right: 5px;
      padding-right: 5px;
      // text-align: center;
      img {
        width: 50px;
        height: 50px;
        padding: 5px 10px 5px 5px;
        margin-top: 8px;
        margin-left: 5px;
      }
      .ziti {
        margin-top: 15px;
        margin-left: 2px;
        padding-right: 28px;
      }
    }
  }
}
</style>
